<template>
  <div v-show="closeFlag">
    <div class="k-resume-modal">
      <span class="ksd-resume-close" @click="handleClose"><i class="iconfont icon-shanchu4"></i></span>
      <client-only>
        <div v-if="pdf.lastIndexOf('pdf')!=-1">
          <vue-office-pdf
              :src="pdf"
              @rendered="renderedHandler"
              @error="errorHandler"
          />
        </div>
        <div v-else>
          <img :src="pdf">
        </div>
      </client-only>
    </div>
    <div class="k-resume-diaolog"></div>
  </div>
</template>
<script setup>
const route = useRoute()
const closeFlag = ref(false)
import VueOfficePdf from '@vue-office/pdf'
const pdf = ref("")
const handleLoadData = async (id)=>{
  const resp = await useLoadResumeTemplateRFileDetail(id)
  pdf.value = resp.data
}

const handleOpen = (id)=>{
  closeFlag.value = true
  handleLoadData(id)
}

const handleClose = ()=>{
  closeFlag.value = false
}

let handleChange = (e) => {
  let files = e.target.files[0];
  let reader = new FileReader();
  reader.readAsArrayBuffer(files);
  reader.onload = function () {
    pdf.value = reader.result;
  };
}

const renderedHandler = () =>{
  console.log("渲染完成")
}
const errorHandler= () =>{
  console.log("渲染失败")
}

definePageMeta({
  layout:"login"
})
defineExpose({
  handleOpen
})

</script>

<style scoped lang="scss">

.ksd-resume-close {
  position: absolute;
  right: 10px;
  top: 5px;
  z-index: 1000;
  cursor: pointer;
}

.k-resume-diaolog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 199;
  overflow: auto;
  background: rgba(0, 0, 0, 0.5);
}

.k-resume-modal {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
  color: #333;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  border-radius: 8px;
  width: 840px;
  max-height: 100vh;
  background: #fff;
  position: fixed;
  margin: 0 auto;
  padding: 30px;
  z-index: 200;
  top: 50%;
  left: 50%;
  overflow: auto;
  transform: translate(-50%, -50%);
}
</style>